import React from "react";
import addonspure from  "react-addons-pure-render-mixin";
import axios from 'axios';


function compare(propertyName) {

    return function(object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        if(value2 < value1) {
            return -1;
        } else if(value2 > value1) {
            return 1;
        } else {
            return 0;
        }
    }
};

class Fund_rank4 extends React.Component{

    constructor(props) {
        super(props);
        // const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            funds_data: [],
            isShow: false,
        };

        this.loadData = this.loadData.bind(this);
        this.shouldComponentUpdate = addonspure.shouldComponentUpdate.bind(this);
        this.getattr=this.getattr.bind(this);
    }

    getattr(FCODE){
        window.location.href = '#/terran/fundinfo?fundID='+parseInt(FCODE);
    }

    loadData(){
        axios.get(global.routes.database+'/getFundList?FTYPE=QDII&Col=SYL_3Y',
        ).then((res)=>{

            let fundsdata= Object.keys(res.data.Data);

            for (var i = 0 ;i<fundsdata.length;i++)
            {
                switch (res.data.Data[i].FCODE.toString().length) {
                    case 1:
                        res.data.Data[i].FCODE = '00000'+res.data.Data[i].FCODE.toString();
                        break;
                    case 2:
                        res.data.Data[i].FCODE = '0000'+res.data.Data[i].FCODE.toString();
                        break;
                    case 3:
                        res.data.Data[i].FCODE = '000'+res.data.Data[i].FCODE.toString();
                        break;
                    case 4:
                        res.data.Data[i].FCODE = '00'+res.data.Data[i].FCODE.toString();
                        break;
                    case 5:
                        res.data.Data[i].FCODE = '0'+res.data.Data[i].FCODE.toString();
                        break;
                    case 6:
                        res.data.Data[i].FCODE = res.data.Data[i].FCODE.toString();
                        break;
                }
                if (res.data.Data[i].DWJZ !== 'null') {
                    res.data.Data[i].DWJZ = Number(res.data.Data[i].DWJZ)
                    switch (res.data.Data[i].DWJZ.toString().length) {
                        case 1:
                            res.data.Data[i].DWJZ = res.data.Data[i].DWJZ.toString() + '.0000';
                            break;
                        case 2:
                            res.data.Data[i].DWJZ = res.data.Data[i].DWJZ.toString() + '0000';
                            break;
                        case 3:
                            res.data.Data[i].DWJZ = res.data.Data[i].DWJZ.toString() + '000';
                            break;
                        case 4:
                            res.data.Data[i].DWJZ = res.data.Data[i].DWJZ.toString() + '00';
                            break;
                        case 5:
                            res.data.Data[i].DWJZ = res.data.Data[i].DWJZ.toString() + '0';
                            break;
                        case 6:
                            res.data.Data[i].DWJZ = res.data.Data[i].DWJZ.toString();
                            break;
                    }
                }
            }
            var datas=res.data.Data.sort(compare("SYL_3Y"));

            this.setState({
                funds_data:datas,
            })
            console.log(this.state.funds_data)
        })
    }

    componentDidMount() {
        this.loadData();
        let timeoutId;
        const  wrapper = this.refs.wrapper;
        const thisSh = this;
        function callback(){
            const top = wrapper.getBoundingClientRect().top;
            const winHight =  window.screen.height;
            if(top < winHight){
                thisSh.loadMoreData(thisSh)
            }
        }
        window.addEventListener("scroll",function () {
            if(timeoutId){
                clearTimeout(timeoutId);
            }
            timeoutId = setTimeout(callback,5000);
        }.bind(this),false);
    }

    loadMoreData(that){
        that.loadData()
    }

    render() {
        return (
            <div style={{height:'77vh',width:'100%',margin:'0',padding:'0',overflowY:'scroll'}}>
                <div style={{ padding: '0 15px' ,margin:'0 0 5px 0',height:'50px',width:'100%'}}
                     /*onClick={() => {
                         window.location.href = '#/terran/fundinfo?fundID='+ getattr()
                     }}*/
                     >
                    {
                        this.state.funds_data.map((item,index)=>{

                            return (
                                <ul className="f_r_list" onClick={()=>{
                                    this.getattr(item.FCODE)
                                }}>
                                    <li className="f_r_list_item1">
                                        <p style={{
                                            fontWeight: 'bold',
                                            fontSize: '12px',
                                            lineHeight: '30px',
                                            margin: '0',
                                            padding: '0',
                                            overflow: 'hidden',
                                            whiteSpace: 'nowrap',
                                            textOverflow: 'ellipsis'
                                        }}>
                                            {item.SHORTNAME}
                                        </p>
                                        <p id="fundID" style={{
                                            color: 'grey',
                                            fontSize: '10px',
                                            lineHeight: '20px',
                                            margin: '0',
                                            padding: '0',
                                            borderBottom: '0.5px solid lightgray'
                                        }}>
                                            {item.FCODE}
                                        </p>
                                    </li>
                                    <li className="f_r_list_item2">
                                        <p style={{
                                            lineHeight: '50px',
                                            margin: '0',
                                            padding: '0',
                                            borderBottom: '0.5px solid lightgray'
                                        }}>
                                            {item.DWJZ}
                                        </p>
                                    </li>
                                    <li className="f_r_list_item3">
                                        <p style={{
                                            lineHeight: '50px',
                                            margin: '0',
                                            padding: '0',
                                            borderBottom: '0.5px solid lightgray'
                                        }}>
                                            {item.SYL_3Y}.00%
                                        </p>
                                    </li>
                                </ul>
                            )
                        })
                    }
                </div>
                <div style={{height:'50px',margin:'0 auto',textAlign:'center',fontSize:'10px',color:'gray',width:'80%'}} ref="wrapper">
                    加载中...
                </div>
            </div>
        );
    };
};

export default Fund_rank4;